body { 
width: 221px; 
height: 369px;
font-family: Trebuchet MS;
}

#notes_list{
	clear: both;
	border-top: 1px solid #A7A2A2;
	overflow-y: scroll;
	height: 200px;
	width: 110%;
	}

	#invisible{
	overflow: hidden;
	width: 100%;
	}


#notes_list .text {
	border-bottom: 1px solid #A7A2A2;
	overflow: hidden;
	padding-right: 5px;
	padding-left: 5px;
}

#notes_list img {
	float: right;
	width: 25px;
	margin-top: 5px;
}


#notes_list .color {
	width: 10px;
	height: 10px;
	float: left;
	margin-right: 3px;
}

#notes_list #red {
	background-color: #f90b0b;
}

#notes_list #blue {
	background-color: #0badf8;
}

#notes_list #green {
	background-color: #2ebd03;
}

#notes_list #coffee {
	background-color: #d6cc32;
}

#locationTabs ul {
list-style: none;
margin: 0;
padding: 0;
}



#locationTabs li {
float: left;
margin: 0;
padding: 0;
width: 33.3%;
text-align: center;
background: #e570e7; /* Old browsers */
background: -moz-linear-gradient(top, #e570e7 0%, #c85ec7 47%, #a849a3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e570e7), color-stop(47%,#c85ec7), color-stop(100%,#a849a3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* IE10+ */
background: linear-gradient(to bottom, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 ); /* IE6-9 */

margin-bottom: 5px;
}

#locationTabs img {
    width: 30px;
	padding: 2px;
	margin-top: 3px;
}

#noteArea {
	width: 90%;
	margin-left: 3%;
}

#locationTabs a.current {
    margin-top: 0px;
    height: 15px;
    color: #aaa;
    line-height: 15px;
}

.buttons div img {
	margin: 15%;
width: 70%;
margin-top: 5px;
margin-bottom: 0px;
}

.buttons div {
	display: inline-block;
	width: 23%;
}

.query {
	text-align: center;
	
}

.query div {
	border: 1px solid #0D73B2;
	padding-right: 5px;
	padding-left: 5px;
	text-align: center;
	display: inline-block;
	width: 15%;
	line-height: 15px;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
	color: #0D73B2;
}

#noteBox, .query {
	background-color: #F0F0EB;
}

#record {
	text-align: center;
	border-top: 2px solid black;
	background: #606c88; /* Old browsers */
	background: -moz-linear-gradient(top, #606c88 0%, #3f4c6b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606c88), color-stop(100%,#3f4c6b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* IE10+ */
	background: linear-gradient(to bottom, #606c88 0%,#3f4c6b 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
	color: white;
}

@media only screen and (max-width: 480px) {  
  html, body {
        border: none;
		width: auto; 
		height: auto;
        margin: 0;
	}
	
	#notes_list{
		
        height: 100%;
        width: 100%;
	}

    #invisible{
        position: absolute;
        height: 60%;
        top: 220px;
        width: auto;
    }
	
	#search_icon img {
		width: 50px;
	}

	#notes_list{
		border-bottom: 2px solid black;
	}
	
	#noteArea {
		height: 30px;
	}
	
	.buttons div {
		width: 24%;
	}

	#record {
		font-size: 24px;
	}

	.query {
		padding-bottom: 5px;
	}
}		